<template>
  <view class="container">
    <backView />

    <!-- 页面标题 -->
    <view class="bg-[#27c530] text-white p-[30rpx] rounded-b-[20rpx]">
      <text class="text-[32rpx] font-bold text-center block">{{ pageTitle }}</text>
    </view>

    <view class="p-[24rpx] pb-[120rpx]">
      <!-- 全面健康评估 -->
      <view v-if="formType === 'allCareAssessment'" class="space-y-[24rpx]">
        <!-- 1. 病症病情 -->
        <DiseaseSymptomsSection
          :is-expanded="collapseStates.diseaseSymptoms"
          @toggle="toggleCollapse('diseaseSymptoms')"
        />

        <!-- 2. 健康状况 -->
        <GeneralHealthStatusSection
          :is-expanded="collapseStates.generalHealthStatus"
          @toggle="toggleCollapse('generalHealthStatus')"
        />

        <!-- 3. 生理功能 -->
        <PhysicalExaminationSection
          :is-expanded="collapseStates.physicalExamination"
          @toggle="toggleCollapse('physicalExamination')"
        />

        <!-- 4. ICF自理能力 -->
        <SelfCareAbilitySection
          :is-expanded="collapseStates.selfCareAbility"
          @toggle="toggleCollapse('selfCareAbility')"
        />

        <!-- 5. 风险和并发症 -->
        <ComplicationsAndRisksSection
          :is-expanded="collapseStates.complicationsAndRisks"
          @toggle="toggleCollapse('complicationsAndRisks')"
        />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import backView from '@/components/backView.vue'
import DiseaseSymptomsSection from './components/DiseaseSymptomsSection.vue'
import GeneralHealthStatusSection from './components/GeneralHealthStatusSection.vue'
import PhysicalExaminationSection from './components/PhysicalExaminationSection.vue'
import SelfCareAbilitySection from './components/SelfCareAbilitySection.vue'
import ComplicationsAndRisksSection from './components/ComplicationsAndRisksSection.vue'

// Props (可选，用于组件调用)
const props = defineProps<{
  formType?: string
}>()


// 获取表单类型 - 优先使用 prop，否则使用 URL 参数或默认值
const formType = computed(() => {
  if (props.formType) {
    return props.formType
  }
  // 从 URL 参数获取 formType，如果没有则默认为 'allCareAssessment'
  const urlParams = new URLSearchParams(window.location.search)
  return urlParams.get('formType') || 'allCareAssessment'
})

// 页面标题
const pageTitle = computed(() => {
  switch (formType.value) {
    case 'allCareAssessment':
      return '全面健康评估'
    default:
      return '健康评估'
  }
})

// 折叠状态
const collapseStates = ref({
  diseaseSymptoms: false,
  generalHealthStatus: false,
  physicalExamination: false,
  selfCareAbility: false,
  complicationsAndRisks: false
})

// 切换折叠状态
const toggleCollapse = (section: string) => {
  collapseStates.value[section as keyof typeof collapseStates.value] = !collapseStates.value[section as keyof typeof collapseStates.value]
}

onMounted(() => {
  // 初始化折叠状态
  Object.keys(collapseStates.value).forEach(key => {
    collapseStates.value[key as keyof typeof collapseStates.value] = false
  })
})
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}
</style>